<template>
  <div class="container">
    <elm-header title="账户信息" :isBack="true" @onBack="$router.back()">
    </elm-header>
    <div class="scroller">
      <van-cell-group style="margin-top:.16rem">
        <van-cell title="头像" >
          <template #right-icon>
            <img class="user-avatar" :src="imgOrigin+userInfo.avatar" >
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell title="用户名" :value="userInfo.username" is-link />
        <van-cell title="收货地址" is-link  />
      </van-cell-group>

      <van-button class="logout-btn"
        @click="handleLogout"
      >退出登录</van-button>
    </div>
  </div>
</template>
<script>
import elmHeader from '../../components/elmHeader'
import {mapState, mapActions} from'vuex'
import {LOGOUT} from '../../store/mutationTypes'
export default {
  components:{
    'elm-header': elmHeader
  },
  data(){
    return {
      imgOrigin:'http://elm.cangdu.org/img/'
    }
  },
  computed:{
    ...mapState('profile',['userInfo'])
  },
  methods:{
    ...mapActions('profile', [LOGOUT]),
    async handleLogout(){
      console.log('logout ---');
      try {
        await this[LOGOUT]()
        this.$toast('退出登录')
        this.$router.push({path:'/login', replace:true})
      } catch (err) {
        console.log(err);
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.container{
  height: 100%;
  display: flex;
  background-color: #f5f5f5;
  .scroller{
    flex: 1;
    margin-top: .45rem;
    width: 100%;
    .user-avatar{
      height: .46rem;
      width: .46rem;
      border-radius: 50%;
      margin-right: .1rem;
    }
    .van-icon-arrow{
      color: #969799;
      height: 24px;
      font-size: 16px;
      line-height: 24px;
    }
    .logout-btn{
      display: block;
      background-color: #d8584a;
      margin: 0.2rem auto;
      color: #fff;
      width: 3.58rem;
    }
  }
}
</style>